<template>
  <div class="nav">
    <div class="toggle-menu">
      <div class="toggle-menu-toggle">
        <el-icon v-if="menuStore.isCollapse" class="icon" @click="openMenu(false)">
          <Expand/>
        </el-icon>
        <el-icon v-else class="icon" @click="closeMenu(true)">
          <Fold/>
        </el-icon>
      </div>
    </div>
    <div class="toggle-menu-breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item>{{$t('message.navs')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ menuStore.breadcrumb }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="lang">
      <el-dropdown>
          <span class="el-dropdown-link">
            语言切换
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-item @click="changeLange('zh')">中文</el-dropdown-item>
          <el-dropdown-item @click="changeLange('en')">英文</el-dropdown-item>
        </template>
      </el-dropdown>
    </div>
    <div class="user">
      <el-dropdown>
         <span class="el-dropdown-link">
           {{ longStore.username }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <router-link to="/userCenter">个人中心</router-link>
            </el-dropdown-item>
            <el-dropdown-item @click="logooutHandle">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import {useLoginStore} from '@/stores/loginStor.js'
import {useMenuStore} from "@/stores/menuStore.js"
import {useRouter} from "vue-router";

const longStore = useLoginStore()
const router = useRouter()
const menuStore = useMenuStore()

const logooutHandle = () => {
  longStore.token = ""
  longStore.permission = ""
  longStore.username = ""
  router.push("/login")
}

const closeMenu = (flag) => {
  menuStore.isCollapse = flag
}
const openMenu = (flag) => {
  menuStore.isCollapse = flag
}
/**
 * 语言切换
 */
const changeLange = (lang) => {
  console.log(lang)
   localStorage.setItem("lang", lang)
   location.reload()
}
</script>

<style lang="scss" scoped>
.nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
}

.toggle-menu {
  padding-top: 17.5px;
  padding-left: 10px;
}

.icon {
  font-size: 25px;
}

.toggle-menu-breadcrumb {
  float: left;
  line-height: 60px;
  margin-top: 6px;
  margin-left: 20px;
}

.toggle-menu-toggle {
  float: left;
}

.user {
  font-size: 15px;
  position: absolute;
  right: 20px;
  top: 20px;
}
.lang{
  float: right;
  margin-right: 120px;
  margin-top: 5px;
}
</style>